<script type="text/javascript">
	$(document).ready(function(){
		$("#featured").tabs({fx:[{opacity: "toggle", duration: 'slow'}, {opacity: "toggle", duration: 'normal'}],
			show: function(event, ui){
				$('#featured .ui-tabs-panel .info').hide();
				var infoheight=$('.info', ui.panel).height();
				$('.info', ui.panel).css('height', '0px').animate({ 'height': infoheight }, 500);
			}
		}).tabs("rotate", 5000, true);
		$('#featured').hover(
			function(){ $('#featured').tabs('rotate', 0, true); },
			function(){ $('#featured').tabs('rotate', 5000, true); }
		);
		$('#featured .ui-tabs-panel a.hideshow').click(function(){
			if($(this).text()=='Hide'){
				$(this).parent('.info').animate({ 'height': '0px' }, 500);
				$(this).text('Show');
			}
			else{
				$(this).parent('.info').animate({ 'height': '70px' }, 500);
				$(this).text('Hide');
			}
			return false;
		});
	});
</script>
<div id="tin_noi_bat" style="width:547px;">
	<h1>Tin tức nổi bật</h2>	
	<!--<img src="/thcs/css/images/noibat.png">-->
	<!---Imge slid show-->
	<div id="featured" >
		  <ul class="ui-tabs-nav">
	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="/thcs/css/images/image1-small.jpg" style="width:65px" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="/thcs/css/images/image2-small.jpg"  style="width:65px" alt=""  /><span>20 Beautiful Long Exposure Photographs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="/thcs/css/images/image3-small.jpg" alt="" style="width:65px" /><span>35 Amazing Logo Designs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="/thcs/css/images/image4-small.jpg" alt="" style="width:65px" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
			<li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="/thcs/css/images/image4-small.jpg" alt="" style="width:65px" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
	      </ul>
		  <!--frist content-->
			<div id="fragment-1" class="ui-tabs-panel" style="">
				<img src="/thcs/css/images/image1.jpg" alt="" width="350px" height="500px" />
				 <div class="info" >
					<a class="hideshow" href="#" >Hide</a>
					<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a href="#" >read more</a></p>
				 </div>
			</div>
			<!-- Second Content -->
	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="/thcs/css/images/image2.jpg" alt="" width="350px" />
			 <div class="info" >
				<!--<a class="hideshow" href="#" >Hide</a>-->
				<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
				<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
			 </div>
	    </div>
		<!-- Third Content -->
	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="/thcs/css/images//image3.jpg" alt="" width="350px"/>
			 <div class="info" >
				<a class="hideshow" href="#" >Hide</a>
				<h2><a href="#" >35 Amazing Logo Designs</a></h2>
				<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
	         </div>
	    </div>

	    <!-- Fourth Content -->
	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="/thcs/css/images//image4.jpg" alt="" width="350px"/>
			 <div class="info" >
				<a class="hideshow" href="#" >Hide</a>
				<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
				<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
	         </div>
	    </div>
		<!-- Fourth Content -->
	    <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="/thcs/css/images//image4.jpg" alt="" width="350px"/>
			 <div class="info" >
				<a class="hideshow" href="#" >Hide</a>
				<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
				<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
	         </div>
	    </div>
	</div>
	
	
	
	
	
	
	<!---End imge show--->
	
	
	<img src="/thcs/css/images/noibat.png">
</div>	
<div class="tintuc">
	<h1><img src="/thcs/css/images/Live_icon.png" width="16px">Tin giáo dục</h1>
	<div class="tintuc_dm">
		<div class="noidung_dm">
			<img src="/thcs/css/images/Live_icon.png" width="80px">
			<a href="#">Tiêu đề </a>
			<p>Nội dung<br>Nội dung<br>Nội dung<br>Nội dung<br></p>
		</div>
		<div class="clear"><hr></div>
		<ul>
			<li><a href="#">ddddddddddddd</a></li>
			<li><a href="#">ddddddddddddd</a></li>
		</ul>
	</div>
</div>
<div class="tintuc">
	<h1><img src="/thcs/css/images/Live_icon.png" width="16px">Tin hoạt động</h1>
	<div class="tintuc_dm">
		<div class="noidung_dm">
			<img src="/thcs/css/images/Live_icon.png" width="80px">
			<a href="#">Tiêu đề </a>
			<p>Nội dung<br>Nội dung<br>Nội dung<br>Nội dung<br></p>
		</div>
		<div class="clear"><hr></div>
		<ul>
			<li><a href="#">ddddddddddddd</a></li>
			<li><a href="#">ddddddddddddd</a></li>
		</ul>
	</div>
</div>
<div class="tintuc">
	<h1><img src="/thcs/css/images/Live_icon.png" width="16px">Thông báo</h1>
	<div class="tintuc_dm">
		<div class="noidung_dm">
			<img src="/thcs/css/images/Live_icon.png" width="80px">
			<a href="#">Tiêu đề </a>
			<p>Nội dung<br>Nội dung<br>Nội dung</p>
		</div>
		<div class="clear"><hr></div>
		<ul>
			<li><a href="#">ddddddddddddd</a></li>
			<li><a href="#">ddddddddddddd</a></li>
		</ul>
	</div>
</div>